import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from 'src/redux/store';
import { useForm } from 'react-hook-form';
import { useLocation, useNavigate } from 'react-router-dom';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import { Page } from 'src/constant/Page';
import Bar from './component/Bar';
// import { openSnackbar } from 'src/redux/uiSlice';
// import { dispatch } from 'src/redux/store';
import { finishWaiting, startWaiting, openSnackbar } from 'src/redux/uiSlice';
import TfaModal from './component/TfaModal';
import style from './SignIn.module.scss';
import { signin } from 'src/service/userService';


type LoginForm = {
  email: string,
  password: string
}

const AuthSignIn = () => {
  const { isLogin } = useSelector((state: RootState) => state.auth);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const location = useLocation();
  const methods = useForm<LoginForm>();
  const [open, setOpen] = useState<boolean>(false);
  const redirectPath = location.state as { from: string } | undefined;


  const onSubmit = (data: LoginForm) => {
    const email = data.email
    signin(data)
      .then((res) => {
        if (res == "has-otp" || res == "no-otp") {
          navigate(res === 'no-otp' ? Page.EnableTfa : Page.Trade);
        }
        else if (res == "unverified") {
          navigate(Page.Verification, { state: { uMail: email, sent: true } });
        } else if (res == "otp") {
          setOpen(true);
        }
        else {
          dispatch(openSnackbar({ message: res, severity: 'alert' }));
        }

      })
      .catch((e) => {
        dispatch(openSnackbar({ message: e, severity: 'alert' }));
      });
  };

  return (
    <>
      <Bar />
      <Form className={style.self} methods={methods} onSubmit={onSubmit}>
        <div className={style.head}>登入</div>
        <div className={style.subHead}>
          还没有帐号吗?
          <Button
            className={style.register}
            appearance="text"
            onClick={() => navigate(Page.Register)}
            type="button"
            data-testid="register-btn"
          >
            注册
          </Button>
        </div>
        <div className={style.input}>
          <FormInput
            name="email"
            type="email"
            data-testid="email-input"
            label="帐号"
            placeholder="Email 地址"
            required
            autoFocus
          />
        </div>
        <div className={style.input}>
          <FormInput
            name="password"
            type="password"
            data-testid="pwd-input"
            label="密码"
            required
          />
        </div>
        <div className={style.forgetPassword}>
          <Button
            appearance="text"
            onClick={() => navigate(Page.ForgetPassword)}
            type="button"
            data-testid="forget-btn"
          >
            忘记密码?
          </Button>
        </div>
        <div className={style.signInButton}>
          <Button type="submit" data-testid="submit-btn">
            登入
          </Button>
        </div>
      </Form>
      <TfaModal
        open={open}
        onClose={() => setOpen(false)}
        loginData={methods.getValues()}
        redirectPath={redirectPath?.from}
      />
    </>
  );
};

export default AuthSignIn;
